<!--
 * @Author: your name
 * @Date: 2022-01-08 10:17:08
 * @LastEditTime: 2022-01-08 17:18:51
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \qf\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="https://developer.mozilla.org/favicon-48x48.97046865.png">
    <link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.0ea0fa02.png">
    <title>网页111111</title>
    <style>
        body{
            height: 600px;
            background:  url(http://pic.wodingche.com/carimg/wmmnsmfsy.jpeg) no-repeat center bottom rgb(221, 241, 172);
            background-size: 100%;
        }
        table{
            width: 500px; /* 宽度 */
            height: 250px; /*高度*/
            text-align: center; /*文本居中*/
            border: 1px solid rgb(235, 37, 185);/*边框设置：边框线条大小 类型 颜色*/
            margin: 100px;/*外边距：一个参数代表上右下左都是同一个参数*/
            margin: 100px 200px;/*外边距：上下 左右*/
            margin: 100px 200px 300px;/*外边距：上 左右 下*/
            margin: 100px 200px 300px 400px;/*外边距：上 右 下 左*/
            /*设置一个布局居中需要1.设置宽度；2.左右外边距为auto*/
            margin: 0 auto;
            /* background-color: antiquewhite; */
            font-size: 24px;/*设置字体大小*/
            color: black;/*设置字体颜色*/
            font-weight: 400;/*设置粗细*/
            font-family: '楷体';/*设置字体*/
        }
        table tr{
            /* background: rgb(252, 28, 252); */
        }
        table tr:nth-child(odd){
            background: rgb(35, 252, 28);
        }
        table tr:nth-child(even){
            background: rgb(241, 49, 145);
        }
        table tr td{
            border: 1px solid blueviolet;
            /* background: blue; */
        }
        div{
            width: 500px;
            margin: 0 auto;
            text-align: right;
            font-size: 0;
        }
        /*块级元素：可以设置宽高，本身无论宽高多少，都占一整行*/
        /*行内块元素：可以设置宽高，只占设置的宽高大小*/
        /*行内元素：不可以设置宽高，只占本身标签大小*/
        div span{
            width: 78px;
            height: 28px;
            display: inline-block;
            font-size: 14px;
            border: 1px solid black;
            border-color: black;
            background: white;
            text-align: center;
            line-height: 28px;/*标签行高：设置行高等于高度的时候文本垂直方向居中*/
            color: black;
        }
        div button{
            width: 80px;
            height: 30px;
        }
    </style>
</head>
<body>
    <!-- 设置边框border="1px"
    设置单元格间距cellspacing="0px"
    设置高度height="300px"
    设置宽度width="500px"
    设置居中align="center" -->
    <table cellspacing="0px">
        <caption>手机信息大全</caption>
        <tr>
            <td>序号</td>
            <td>品牌</td>
            <td>价格</td>
            <td>型号</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>1</td>
            <td>华为</td>
            <td>5000</td>
            <td>p40</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>2</td>
            <td>华为</td>
            <td>5000</td>
            <td>p40</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>3</td>
            <td>华为</td>
            <td>5000</td>
            <td>p40</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>4</td>
            <td>华为</td>
            <td>5000</td>
            <td>p40</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>5</td>
            <td>华为</td>
            <td>5000</td>
            <td>p40</td>
            <td>删除</td>
        </tr>
    </table>
    <div>
        <span>添加数据</span>
        <button>删除数据</button>
    </div>
    <img src="D:\启帆\20220108\qf\static\images\t018ffa764ed928ea6d.jpg" alt="">
    <img src="static\images\t018ffa764ed928ea6d.jpg" alt="">
</body>
</html>
